<script lang="jsx" setup>
import { ref } from 'vue';
</script>

<template>
  <table border="0" cellspacing="0">
    <tbody>
      <tr>
        <th></th>
        <th>字段</th>
        <th>字段</th>
        <th>字段</th>
        <th>字段</th>
      </tr>
      <tr>
        <th>字段</th>
        <td>8098</td>
        <td>19.80%</td>
        <td>22</td>
        <td>368</td>
      </tr>
      <tr>
        <th>字段</th>
        <td>7506</td>
        <td>6.70%</td>
        <td>22</td>
        <td>339</td>
      </tr>
      <tr>
        <th>字段</th>
        <td>3261</td>
        <td>32.30%</td>
        <td>10</td>
        <td>325.7</td>
      </tr>
      <tr>
        <th>字段</th>
        <td>1993</td>
        <td>201%</td>
        <td>10</td>
        <td>199</td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
table {
  width: 100%;
  height: 100%;
  text-align: center;
}
table th {
  font-size: 0.16rem;
  background: rgba(0, 0, 0, 0.1);
}
table td {
  font-size: 0.16rem;
  color: rgba(255, 255, 255, 0.6);
}
table th,
table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.05rem 0;
  color: #fff;
}
</style>
